<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOCX to HTML Converter</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .settings-container {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .setting-item {
            margin-bottom: 15px;
        }
        
        .setting-item label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
        }
        
        .slider-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        input[type="range"] {
            flex: 1;
            height: 6px;
            border-radius: 3px;
            background: #ddd;
            outline: none;
        }
        
        input[type="range"]::-webkit-slider-thumb {
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #3498db;
            cursor: pointer;
        }
        
        input[type="range"]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #3498db;
            cursor: pointer;
            border: none;
        }
        
        #quality-value {
            min-width: 40px;
            text-align: center;
            font-weight: bold;
            color: #3498db;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px 0;
        }
        
        h1 {
            color: #2c3e50;
            font-size: 2.2em;
            margin-bottom: 10px;
        }
        
        .subtitle {
            color: #7f8c8d;
            font-size: 1.1em;
        }
        
        .upload-section {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .upload-area {
            border: 2px dashed #3498db;
            border-radius: 8px;
            padding: 40px 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }
        
        .upload-area:hover {
            border-color: #2980b9;
            background-color: #f8f9fa;
        }
        
        .upload-icon {
            font-size: 48px;
            color: #3498db;
            margin-bottom: 15px;
        }
        
        .upload-text {
            color: #555;
            font-size: 1.1em;
        }
        
        .selected-file {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #f0f7fc;
            padding: 12px 15px;
            border-radius: 6px;
            margin-top: 15px;
        }
        
        .file-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .file-icon {
            color: #3498db;
            font-size: 20px;
        }
        
        .file-name {
            font-weight: 500;
            color: #2c3e50;
            word-break: break-all;
            flex: 1;
        }
        
        .remove-file {
            background: none;
            border: none;
            color: #e74c3c;
            cursor: pointer;
            font-size: 18px;
            padding: 5px;
            transition: color 0.3s ease;
        }
        
        .remove-file:hover {
            color: #c0392b;
        }
        
        .btn {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            font-size: 1em;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 5px;
        }
        
        .btn:hover {
            background-color: #2980b9;
        }
        
        .btn:disabled {
            background-color: #95a5a6;
            cursor: not-allowed;
        }
        
        .btn-secondary {
            background-color: #95a5a6;
        }
        
        .btn-secondary:hover {
            background-color: #7f8c8d;
        }
        
        .result-section {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-bottom: 30px;
            display: none;
        }
        
        .section-title {
            font-size: 1.5em;
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #ecf0f1;
        }
        
        .download-options {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .option-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            width: calc(50% - 8px);
            min-width: 250px;
            transition: all 0.3s ease;
        }
        
        .option-card:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-color: #3498db;
        }
        
        .option-title {
            font-weight: 500;
            color: #2c3e50;
            margin-bottom: 8px;
        }
        
        .option-desc {
            color: #7f8c8d;
            font-size: 0.9em;
            margin-bottom: 15px;
        }
        
        .sections-list {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #eee;
            border-radius: 6px;
            padding: 10px;
            margin-bottom: 20px;
        }
        
        .section-item {
            padding: 10px 15px;
            margin-bottom: 5px;
            background: #f8f9fa;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .section-item:hover {
            background: #e9ecef;
        }
        
        .section-name {
            font-weight: 500;
            color: #2c3e50;
            flex: 1;
        }
        
        .processing-section {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-bottom: 30px;
            text-align: center;
            display: none;
        }
        
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .processing-text {
            font-size: 1.1em;
            color: #555;
        }
        
        .messages-section {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
        }
        
        .message-title {
            font-weight: 500;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .message-list {
            list-style: none;
        }
        
        .message-item {
            padding: 5px 0;
            color: #7f8c8d;
            font-size: 0.9em;
        }
        
        footer {
            text-align: center;
            padding: 20px 0;
            color: #7f8c8d;
            font-size: 0.9em;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }
            
            h1 {
                font-size: 1.8em;
            }
            
            .upload-section,
            .result-section,
            .processing-section {
                padding: 20px;
            }
            
            .option-card {
                width: 100%;
            }
            
            .slider-container {
                flex-direction: column;
                align-items: stretch;
            }
            
            #quality-value {
                text-align: center;
                margin-top: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>DOCX to HTML Converter</h1>
            <p class="subtitle">轻松将Word文档转换为高质量HTML</p>
        </header>
        
        <div class="settings-container">
            <div class="setting-item">
                <label for="quality-slider">图片质量 (默认 0.01):</label>
                <div class="slider-container">
                    <input type="range" id="quality-slider" min="0.01" max="1" step="0.01" value="0.01">
                    <span id="quality-value">0.01</span>
                </div>
            </div>
        </div>
        
        <div class="upload-section">
            <div class="upload-area" id="uploadArea">
                <div class="upload-icon">📁</div>
                <p class="upload-text">点击或拖拽DOCX文件到此处</p>
                <p style="color: #999; margin-top: 5px;">或者</p>
                <button class="btn" id="selectFileBtn">选择文件</button>
            </div>
            <div id="selectedFileContainer" style="display: none;">
                <div class="selected-file">
                    <div class="file-info">
                        <span class="file-icon">📄</span>
                        <span class="file-name" id="fileName"></span>
                    </div>
                    <button class="remove-file" id="removeFileBtn">×</button>
                </div>
                <button class="btn" id="convertBtn" disabled>转换</button>
            </div>
        </div>
        
        <div class="processing-section" id="processingSection">
            <div class="loading-spinner"></div>
            <p class="processing-text">正在转换文件，请稍候...</p>
        </div>
        
        <div class="result-section" id="resultSection">
            <h2 class="section-title">转换完成</h2>
            
            <div class="download-options">
                <div class="option-card">
                    <div class="option-title">完整HTML文件</div>
                    <div class="option-desc">包含完整的HTML结构、样式和内容</div>
                    <button class="btn" id="downloadFullBtn">下载完整HTML</button>
                </div>
                
                <div class="option-card">
                    <div class="option-title">仅内容HTML</div>
                    <div class="option-desc">仅包含正文内容，不包含HTML、HEAD、BODY标签</div>
                    <button class="btn" id="downloadContentBtn">下载内容HTML</button>
                </div>
            </div>
            
            <div id="sectionsContainer">
                <h3 style="margin-bottom: 15px; color: #2c3e50;">按章节下载</h3>
                <div class="sections-list" id="sectionsList"></div>
            </div>
            
            <div class="messages-section" id="messagesContainer">
                <div class="message-title">转换信息</div>
                <ul class="message-list" id="messageList"></ul>
            </div>
            
            <div style="text-align: center; margin-top: 30px;">
                <button class="btn btn-secondary" id="convertAnotherBtn">转换另一个文件</button>
            </div>
        </div>
        
        <footer>
            <p>DOCX to HTML Converter © 2023</p>
        </footer>
    </div>
    
    <script>
        let currentFilePath = null;
        let conversionResult = null;
        
        document.addEventListener('DOMContentLoaded', () => {
            // 初始化事件监听器
            initEventListeners();
        });
        
        function initEventListeners() {
            // 获取质量值的函数
            function getQualityValue() {
                return parseFloat(document.getElementById('quality-slider').value);
            }
            
            // 更新质量值显示
            document.getElementById('quality-slider').addEventListener('input', function() {
                document.getElementById('quality-value').textContent = this.value;
            });
            
            // 上传区域点击
            document.getElementById('uploadArea').addEventListener('click', selectFile);
            
            // 选择文件按钮
            document.getElementById('selectFileBtn').addEventListener('click', selectFile);
            
            // 移除文件按钮
            document.getElementById('removeFileBtn').addEventListener('click', removeFile);
            
            // 转换按钮
            document.getElementById('convertBtn').addEventListener('click', convertFile);
            
            // 下载按钮
            document.getElementById('downloadFullBtn').addEventListener('click', () => downloadFile('full'));
            document.getElementById('downloadContentBtn').addEventListener('click', () => downloadFile('content'));
            
            // 转换另一个文件
            document.getElementById('convertAnotherBtn').addEventListener('click', resetForm);
            
            // 拖拽功能
            const uploadArea = document.getElementById('uploadArea');
            uploadArea.addEventListener('dragover', (e) => {
                e.preventDefault();
                uploadArea.style.backgroundColor = '#e8f4f8';
            });
            
            uploadArea.addEventListener('dragleave', () => {
                uploadArea.style.backgroundColor = '';
            });
            
            uploadArea.addEventListener('drop', (e) => {
                e.preventDefault();
                uploadArea.style.backgroundColor = '';
                
                if (e.dataTransfer.files.length > 0) {
                    const file = e.dataTransfer.files[0];
                    if (file.name.endsWith('.docx')) {
                        handleFileSelection(file.path);
                    } else {
                        alert('请选择DOCX格式的文件');
                    }
                }
            });
        }
        
        async function selectFile() {
            try {
                const filePath = await window.electronAPI.selectFile();
                if (filePath) {
                    handleFileSelection(filePath);
                }
            } catch (error) {
                console.error('选择文件失败:', error);
                alert('选择文件失败: ' + error.message);
            }
        }
        
        function handleFileSelection(filePath) {
            currentFilePath = filePath;
            const fileName = filePath.split('/').pop();
            
            document.getElementById('fileName').textContent = fileName;
            document.getElementById('selectedFileContainer').style.display = 'block';
            document.getElementById('convertBtn').disabled = false;
        }
        
        function removeFile() {
            currentFilePath = null;
            document.getElementById('selectedFileContainer').style.display = 'none';
            document.getElementById('convertBtn').disabled = true;
        }
        
        async function convertFile() {
            if (!currentFilePath) return;
            
            try {
                // 显示处理中状态
                document.querySelector('.upload-section').style.display = 'none';
                document.getElementById('processingSection').style.display = 'block';
                
                // 获取用户设置的质量参数
                const quality = parseFloat(document.getElementById('quality-slider').value);
                
                // 执行转换，传入质量参数
                conversionResult = await window.electronAPI.convertDocx(currentFilePath, quality);
                
                // 显示结果
                document.getElementById('processingSection').style.display = 'none';
                document.getElementById('resultSection').style.display = 'block';
                
                // 显示章节列表
                displaySections();
                
                // 显示转换信息
                displayMessages();
                
            } catch (error) {
                console.error('转换失败:', error);
                alert('转换失败: ' + error.message);
                
                // 恢复初始状态
                document.getElementById('processingSection').style.display = 'none';
                document.querySelector('.upload-section').style.display = 'block';
            }
        }
        
        function displaySections() {
            const sectionsList = document.getElementById('sectionsList');
            sectionsList.innerHTML = '';
            
            if (conversionResult.sections && conversionResult.sections.length > 0) {
                conversionResult.sections.forEach((section, index) => {
                    const sectionItem = document.createElement('div');
                    sectionItem.className = 'section-item';
                    
                    const sectionName = document.createElement('span');
                    sectionName.className = 'section-name';
                    sectionName.textContent = section.title;
                    
                    const downloadBtn = document.createElement('button');
                    downloadBtn.className = 'btn';
                    downloadBtn.style.padding = '5px 15px';
                    downloadBtn.style.fontSize = '0.9em';
                    downloadBtn.textContent = '下载';
                    downloadBtn.addEventListener('click', () => downloadSection(section, index + 1));
                    
                    sectionItem.appendChild(sectionName);
                    sectionItem.appendChild(downloadBtn);
                    sectionsList.appendChild(sectionItem);
                });
            } else {
                sectionsList.innerHTML = '<p style="text-align: center; color: #7f8c8d; padding: 20px;">未找到章节</p>';
                document.getElementById('sectionsContainer').style.display = 'none';
            }
        }
        
        function displayMessages() {
            const messageList = document.getElementById('messageList');
            messageList.innerHTML = '';
            
            if (conversionResult.messages && conversionResult.messages.length > 0) {
                conversionResult.messages.forEach(message => {
                    const li = document.createElement('li');
                    li.className = 'message-item';
                    li.textContent = message;
                    messageList.appendChild(li);
                });
            } else {
                document.getElementById('messagesContainer').style.display = 'none';
            }
        }
        
        async function downloadFile(type) {
            if (!conversionResult) return;
            
            try {
                let content;
                let defaultFilename;
                
                const originalFilename = currentFilePath.split('/').pop().replace('.docx', '');
                
                if (type === 'full') {
                    content = conversionResult.fullHtml;
                    defaultFilename = `${originalFilename}_full.html`;
                } else {
                    content = conversionResult.contentOnly;
                    defaultFilename = `${originalFilename}_content.html`;
                }
                
                const savedPath = await window.electronAPI.saveFile(content, defaultFilename);
                if (savedPath) {
                    console.log('文件已保存:', savedPath);
                }
            } catch (error) {
                console.error('保存文件失败:', error);
                alert('保存文件失败: ' + error.message);
            }
        }
        
        async function downloadSection(section, index) {
            if (!conversionResult || !section) return;
            
            try {
                const originalFilename = currentFilePath.split('/').pop().replace('.docx', '');
                const sanitizedTitle = section.title.replace(/[\\/:*?"<>|]/g, '_').substring(0, 50);
                const defaultFilename = `${originalFilename}_section_${index}_${sanitizedTitle}.html`;
                
                const savedPath = await window.electronAPI.saveFile(section.content, defaultFilename);
                if (savedPath) {
                    console.log('章节文件已保存:', savedPath);
                }
            } catch (error) {
                console.error('保存章节失败:', error);
                alert('保存章节失败: ' + error.message);
            }
        }
        
        function resetForm() {
            // 重置状态
            currentFilePath = null;
            conversionResult = null;
            
            // 重置UI
            document.getElementById('resultSection').style.display = 'none';
            document.querySelector('.upload-section').style.display = 'block';
            document.getElementById('selectedFileContainer').style.display = 'none';
            document.getElementById('convertBtn').disabled = true;
            document.getElementById('sectionsContainer').style.display = 'block';
            document.getElementById('messagesContainer').style.display = 'block';
        }
    </script>
</body>
</html>